<!DOCTYPE html>
<html lang="en"   xmlns:th="http://www.thymeleaf.org" th:fragment="getcollectbyuser">

	<head>
	
		<!-- Basic -->
    	<meta charset="UTF-8" />

		<title>Invoice | Nadhif - Responsive Admin Template</title>
		
		<!-- Mobile Metas -->
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<!-- Import google fonts -->

        
		<!-- Favicon and touch icons -->
		<link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png" />
		<link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png" />
		<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png" />
		<link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png" />
		<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png" />
		<link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png" />
		<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png" />
		<link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png" />
		
	    <!-- start: CSS file-->
		
		<!-- Vendor CSS-->
		<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="/vendor/skycons/css/skycons.css" rel="stylesheet" />
		<link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		
		<!-- Plugins CSS-->
		<link href="/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
		<link href="/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet" />
		<link href="/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet" />
		
		<!-- Theme CSS -->
		<link href="assets/css/jquery.mmenu.css" rel="stylesheet" />
		
		<!-- Page CSS -->		
		<link href="/css/style.css" rel="stylesheet" />
		<link href="/css/add-ons.min.css" rel="stylesheet" />
		
		<!-- end: CSS file-->	

		<!-- Head Libs -->
		<script src="/plugins/modernizr/js/modernizr.js"></script>
		

		
	</head>
	
	<body>
	
		<!-- Start: Header -->
		<div class="navbar" role="navigation">
			<div class="container-fluid container-nav" style="width: 100%;">
				<!-- Navbar Action -->
				<ul class="nav navbar-nav navbar-actions navbar-left">

					<li class="visible-md visible-lg" th:text="${collectList.get(0).getUserName()}"> </li>
					<li class="visible-md visible-lg" >&nbsp 的个人收藏：</li>
				</ul>
				<!-- Navbar Left -->

				<!-- Navbar Right -->
				<div class="navbar-right">
					<a href="http://localhost:8080/toindex" class="" data-toggle="">
						返回
					</a>

					<!-- End Notifications -->
					<!-- Userbox -->
					<!-- End Userbox -->
				</div>
				<!-- End Navbar Right -->
			</div>
		</div>
		<!-- End: Header -->
		
		<!-- Start: Content -->
		<div class="container-fluid content" >
			<div class="row">
		
				<!-- Main Page -->
				<div class=" " style="margin: 100px auto;   width:1100px;">


					<!--<div class="search-wrapper" style="margin-left: 20px; margin-bottom: 90px;" >
						<input type="text" id="search_input"   maxlength="64" style="width: 900px; heigit:20px; line-height: 20px;padding:12px 16px; border:1px solid #fff;border-right:0;"  placeholder="搜索网页">
						<input type="submit" id="search_button" class="search_button" value="搜索" style="width: 142px; height:46px; font-size:18px;color:#fff;border:0; background:#435D78;cursor: pointer;">
					</div>-->


					<!-- End Page Header -->
					<div class="invoice" id="collect-content3">
						<div class="row header">
							<div class="col-sm-12  clearFlout" th:each="collect:${collectList}">
								<div class="panel panel-accordion">
									<div class="panel-heading bk-bg-primary">
										<h4 class="panel-title">
											<a class="accordion-toggle" data-toggle="collapse" style="text-decoration:none;" data-parent="#accordionInfo" href="#collapseInfoOne"th:text="${collect.title}">
												spring-boot - 纯洁的微笑博客
											</a>
										</h4></div>


										<div id="collapseInfo1" class="accordion-body clearfix"  >
											<a  style="color:#5e5e5e;text-decoration:none;" th:href="${collect.url}">
												<img  th:src="${collect.logoUrl}" alt="" height="100px;" width="100px;" style="float: left; margin: 10px 10px 10px 10px;">
												<div class="panel-body"th:text="${collect.category}" style="overflow: hidden; width: 800px; height:100px;float: left;" >内容</div>
											</a>
										</div>



									<div style="width: 100%; margin-bottom: 20px;">
										<span style="margin-left: 60%; ">
											<a th:onclick="'opeanview('+ ${collect.getId()}+')'" style="cursor: pointer; color:#5e5e5e;"><i class="glyphicon glyphicon-comment" th:text="${collect.getCommentSize()}"></i> </a>
										</span>

										<span style="margin-left:30px " th:text="'来自用户:  '+${collect.getUserName()}"></span>
										<span style="margin-left:30px " th:text="'收藏夹:  '+${collect.getFavoriteName()}"></span>
									</div>
										<ul  th:id="${collect.getId()}" style="width:1100px; margin:0 auto;  list-style: none; display: none;">

											<li>
												<p class="clearfix">
													<!--<input type="text" th:id="'viewContent'+${collect.getId()}" style="height: 30px; width: 1000px; " placeholder="请输入评论内容">
													<button th:onclick="'CommentBtn('+${collect.getId()}+')'">提交</button>-->
													<button style="cursor: pointer; float: right; margin:8px 12px 0 0;"  th:onclick="'closeview('+ ${collect.getId()}+')'">收起</button>
												</p>
											</li>
											<li th:each="commentList:${collect.getCommentList()}">
												<table style="margin-left: 20px;">
													<tr>
														<td style="color: #0a0a0a;" th:text="${commentList.getSendUserName()}+' : '"></td>
														<td th:text="${commentList.getContent()}"></td>
													</tr>
												</table>

											</li>

										</ul>

								</div>
							</div>
						</div>
					</div>	
				</div>
				<!-- End Main Page -->			
		
				<!-- Usage -->

				<!-- End Usage -->

			</div>
		</div><!--/container-->

		
		<script>




			function opeanview(id) {
     				$("#"+id).show();
			}
			function closeview(id) {
				$("#"+id).hide();
			}

			function CommentBtn(collectid) {

				$.ajax({
					type:"POST",
					dataType:"JSON",
					contentType: "application/json;charset=UTF-8",
					url:"/addComment",
					data:JSON.stringify({
						content:$("#viewContent"+collectid).val(),
						sendUserId:localStorage.getItem("id"),
						collectId:collectid
					}),
					beforeSend: function (XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
					},
					success:function (Response) {
						$("#viewContent").value=null;
						alert(Response.msg)
					}
				})
			}

			function searchcollectcontent3(){

			}
		</script>
		
		
		<!-- start: JavaScript-->
		
		<!-- Vendor JS-->				
		<script src="/vendor/js/jquery.min.js"></script>
		<script src="/vendor/js/jquery-2.1.1.min.js"></script>
		<script src="/vendor/js/jquery-migrate-1.2.1.min.js"></script>
		<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="/vendor/skycons/js/skycons.js"></script>
		
		<!-- Plugins JS-->
		<script src="/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
		<script src="/plugins/moment/js/moment.min.js"></script>
		<script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
		
		<!-- Theme JS -->		
		<script src="/js/jquery.mmenu.min.js"></script>
		<script src="/js/core.min.js"></script>
		
		<!-- Pages JS -->
		<script src="/js/pages/invoice.js"></script>
		
		<!-- end: JavaScript-->

	</body>
	
</html>